<template>
  <div >
      <city-header></city-header>
      <city-search :cities="cities"></city-search>
      <city-list :cities="cities" :hotCities="hotCities" :letter="letter"></city-list>
      <city-alphabet :cities="cities" @lettChange="handleLetterChange"></city-alphabet>
  </div>

</template>

<script>
  import axios from 'axios'
  import CityHeader from './components/Header'
  import CitySearch from './components/Search'
  import CityList   from './components/List'
  import CityAlphabet from './components/Alphabet'
    export default {
        name: "City",
        components:{
          CityHeader:CityHeader,
          CitySearch:CitySearch,
          CityList:CityList,
          CityAlphabet:CityAlphabet
        },
      data(){
          return {
            cities:{},
            hotCities:[],
            letter:""
          }
      },
      methods:{
          getCityInfo(){
            axios.get('/api/city.json')
              .then(this.getCityInfoSucc)
          },
          getCityInfoSucc(res){
           let  resj=res.data;
           if(resj.ret &&resj.data){
             const data =resj.data;
             this.cities=data.cities;
             this.hotCities=data.hotCities;

             console.log(data)
           }
          },
         handleLetterChange(d){
            this.letter=d;
           console.log(this.letter+"city组件响应 父")

         }
      },

      mounted(){
          this.getCityInfo()

      }
    }
</script>

<style lang="stylus" scoped>

</style>
